import { DownOutlined, MenuOutlined, SettingOutlined } from '@ant-design/icons'
import { Dropdown, Menu, Modal, Image } from 'antd'
import VedioReact from '../VedioReact'
import './index.less'
interface IProps {
  open: boolean
  onCancel: () => void
}
interface IData {
  key: string
  label: string
  type: 'vedio' | 'img'
  vedioSrc?: string
  imgSrc?: string
  textTitle: string
  subTitle: string
}
const YouKnow = (props: IProps) => {
  const initData: IData[] = [
    {
      key: '1-1',
      label: '页面缩放比例',
      type: 'img',
      imgSrc: 'https://sop.7sef.com/prod/20250227/144871D1-D1A5-4592-B9B1-0C91700474D4_1740647800282.png',
      textTitle: '如何缩放页面，让列表展示更多行数据？',
      subTitle:
        '谷歌浏览器点击右上角三个点，在目录中找到缩放页面功能，根据屏幕大小适当调整页面比例，其它浏览器参照此方法。',
    },
    {
      key: '1-2',
      label: '多订单号筛选',
      type: 'vedio',
      vedioSrc: 'https://sop.7sef.com/prod/20250227/SX_1740647913536.mp4',
      textTitle: '采购订单支持多订单筛选啦，快去试试！',
      subTitle: '在Excel表格中可以直接复制采购订单列，黏贴进采购订单筛选框中，点击查询列表数。',
    },
    {
      key: '1-3',
      label: '导出即导入',
      type: 'vedio',
      vedioSrc: 'https://sop.7sef.com/prod/20250227/DRJDC_1740647929962.mp4',
      textTitle: '导出即导入，无需下载数据模板！',
      subTitle: '各界面可以直接导出数据文件，在文件中补充完整信息，再将文件导入系统即可。',
    },
    {
      key: '1-4',
      label: '商品条码批量复制',
      type: 'img',
      imgSrc: 'https://sop.7sef.com/prod/20250227/87ABCDB6-4DD6-43b4-AAFD-96D09D704402_1740647855256.png',
      textTitle: '如何操作商品条码批量复制',
      subTitle: '在商品管理界面，鼠标移至款式编码看，在浮窗中点击复制按钮即可一键复制款式下所有sku条码。',
    },
  ]
  const handleClick = (key: string) => {
    const target = document.getElementById(key)
    target?.scrollIntoView({ behavior: 'smooth' })
  }
  return (
    <Modal
      width={1200}
      wrapClassName="custom_you_know_wrap"
      title={
        <div className="custom_you_know_box">
          <div>你知道吗？</div>
          <div className="fixed_left">
            <Dropdown
              overlayClassName="custom_you_know_dropdown_wrap"
              menu={{
                items: [
                  {
                    key: 'contents',
                    type: 'group',
                    label: '目录',
                    children: initData.map((item) => {
                      return {
                        key: item.key,
                        label: <div onClick={() => handleClick(item.key)}>{item.label}</div>,
                      }
                    }),
                  },
                ],
              }}
            >
              <MenuOutlined />
            </Dropdown>
          </div>
        </div>
      }
      footer={null}
      maskClosable
      open={props.open}
      onCancel={props.onCancel}
    >
      <div className="main_content_wrap">
        {initData?.map((item) => {
          return (
            <div className="main_content_item" id={item.key} key={item.key}>
              <div className="left_content">
                {item.type === 'img' ? (
                  <Image className="left_element" src={item?.imgSrc}></Image>
                ) : item.type === 'vedio' ? (
                  <div className="left_element">
                    <VedioReact src={item.vedioSrc!}></VedioReact>
                  </div>
                ) : null}
              </div>
              <div className="right_content">
                <div className="rc_text_title">{item.textTitle}</div>
                <div className="rc_sub_title">{item.subTitle}</div>
              </div>
            </div>
          )
        })}
      </div>
    </Modal>
  )
}
export default YouKnow
